<template>
<div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4">多 v-model 绑定示例</h1>
    
    <div class="mb-8">
      <label class="block mb-2 font-medium">用户表单:</label>
      <VModelForm
        :num="num"
        @change:num="handleNumberChange"
        v-model="skills"
        v-model:name="user.name" 
        v-model:email="user.email" 
      />
    </div>
    
    <div class="bg-gray-100 p-4 rounded">
      <h3 class="font-medium mb-2">用户信息:</h3>
      <p>姓名: {{ user.name }}</p>
      <p>邮箱: {{ user.email }}</p>
    </div>
  </div>

  <div>
    <h1>{{ num }}</h1>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import VModelForm from './V-Model-Form.vue';

const num = ref(0);

const user = ref({name:'leslie',email:'leslie@sina.com'});
const skills = ref(['Vue', 'JavaScript', 'TypeScript']);

const handleNumberChange = (value: number) =>{
  num.value = value
}
</script>